<template>
    <div>

    
        <van-search @search="onSearch" style="margin:5px;" v-model="value" placeholder="请输入搜索关键词" />
        <div v-if="isRecomm">
          <van-divider class="margin"/>
          <div class="flex">
              <span class="his">搜&nbsp;索&nbsp;历&nbsp;史</span>
              <div class="nav_mine">
                  <van-tag :key="index" @click="goSearch(item)" v-for="(item, index) in historyArr" class="tag" color="#F4F4F4" size="large" text-color="#333" round type="primary">{{item}}</van-tag>
              </div>
          </div>

          <div class="title">
              <span>热搜榜</span>
          </div>
          <van-divider class="margin"/>

          <van-grid :gutter="5" :column-num="2" >
              <van-grid-item @click="addSong(item)" class="griditem" v-for="(item, index) in songlists" :key="index">
                  <van-row class="vanrow" v-model="activeKey">
                      <van-icon name="music-o" size="18" color="#EE0A24" />
                      <van-col class="vancol">{{item.name.slice(0,8)}}</van-col>
                  </van-row>
              </van-grid-item>
          </van-grid>

        </div>

        <div v-if="!isRecomm">
            <van-cell @click="addSongTo(item)" style="text-align:left;" v-for="(item,index) in songs" :key="index">
                <div class="index">
                  <div class="indexname">
                      <van-icon class="icon" name="music-o" size="25" color="#EE0A24" />
                      <span><span class="song">{{item.name.slice(0,20)}} </span> - <span class="singer"> {{item.artists[0].name==null?"佚名":item.artists[0].name}}</span></span>
                  </div>
                </div>
            </van-cell>
        </div>



    </div>
</template>

<script>
import List from '@/api/index'
export default {
  data() {
    return {
      activeKey: 0,
      isRecomm:true,
      value:'',
      songlists:[],
      historyArr:[],
      songs:[]
    };
  },methods:{
    getList(){
      let _this = this;
      List.getNewSong().then(function(res){
          _this.songlists = res.data.result.slice(0,8);
      })
    },
    getHistory(){
      let search_history = localStorage.getItem('search_history');
      if(search_history){
        this.historyArr = search_history.split('::');
      }
      //console.log('historyArr ',this.historyArr)
    },
    onSearch(){
      this.historyArr.unshift(this.value)
      if(this.historyArr.length == 7){
        this.historyArr.pop();
      }
      localStorage.setItem('search_history', this.historyArr.join('::'));
      this.getSearch();
    },
    goSearch(item){
      this.value = item;
      this.getSearch();
    },getSearch(){
      let _this = this;
      List.getSearch(this.value).then(function(res){
        _this.songs = res.data.result.songs;
      })
    },
    chooseSong(item){
      console.log(this.chooseSong)
    },
    addSong(item){
      this.$store.commit('pushSongList',{id:item.id, name:item.name, pic:item.picUrl});
      this.$router.push('/music3');
    },
    addSongTo(item){
      //$router.push({name:'music',params:{id:item.id, name:item.name, pic:item.picUrl}})
      //console.log(item)
      this.$store.commit('pushSongList',{id:item.id, name:item.name, pic:item.picUrl});
      this.$router.push('/music3');
    }
  },mounted(){
    this.getList();
    this.getHistory();
  },watch:{
    value(){
      if(this.value.length != 0) {
        this.isRecomm=false;
        this.getSearch();
      }
      else {
        this.isRecomm = true;
        this.songs = [];
      }

    }
  }
};
</script>

<style scoped>
.margin{
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 3%;
  margin-top: 3%;
}
.title{ 
  height:40px; 
  line-height:75px; 
  display:flex;
  justify-content:space-between
}
.title span{
  margin-left: 25px;
  font-size: 18px;
}
.tag{
    padding: 6px 12px;
    border: 1px solid #aca9a73b;
    color: #aca9a7;
    margin-right: 10px; 
    font-size: 13px;
    list-style: none;
    white-space: nowrap;
}
.his{
    margin: 0px 25px;
    /* border: 1px solid #000; */
}
.nav_mine {
    display: flex;
    align-items: center;
    overflow-y: hidden;
    flex-wrap: nowrap;
    /* border: 1px solid #000; */
}
.flex{
    align-items:center;
    display: flex;
    flex-direction:row;
}
.griditem{
    display: flex;
    justify-content: flex-start;
}
.vancol{
    width: 160px;
    margin-left: 3%;

}
.vanrow{
    display: flex;
    flex-direction:row;
    align-items:center;
    margin-left: 15%;
}
.indexname{
    display: flex;
    flex-direction:row;
    align-items:center;
    margin: 2%;
}
.song{
  font-size: 18px;
  /* border: 1px solid #000; */
}
.singer{
  font-size: 13px;
  color: gray;
  /* border: 1px solid #000; */
}
.icon{
  margin-right: 5%;
}

</style>
